<template>
  <div class="authority">
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true">
        <el-form-item label="行政区划">
          <el-cascader style="width: 100%" :options="areaList" :props="props1" v-model="searchPids"
            @change="searchAreaChange" />
        </el-form-item>
        <el-form-item label="单位名称">
          <el-input v-model="searchInfo.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">
            查询
          </el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box unit">
      <div class="gva-btn-list">
        <ExportExcel template-id="api" :limit="9999" />
        <!-- <el-button type="primary" icon="download" @click="exportExcelFunc">导出</el-button> -->
      </div>
      <div class="ant-alert-info">
        <el-popover placement="left-start" :width="350" trigger="click" transition='el-zoom-in-left'>
          <div class="pop-content">
            <div class="pop-title">自定义列</div>
            <div class="check-list">
              <el-checkbox-group v-model="checkedColumns" @change="handleColumnsChange">
                <el-checkbox v-for="column in columns" :value="column" :label="column"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <template #reference>
            <div class="anticon">
              <el-icon size="16" color="#1890ff">
                <Setting />
              </el-icon>
              <div style="margin-left: 2px;">自定义列</div>
            </div>
          </template>
        </el-popover>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="name" label="单位名称" width="180">
        </el-table-column>
        <el-table-column label="人员编制">
          <el-table-column prop="thirdNums" label="三定">
          </el-table-column>
          <el-table-column label="实有" prop="realNums">
          </el-table-column>
        </el-table-column>
        <el-table-column label="办公室面积">
          <el-table-column prop="bsh" label="使用">
            <template #default="scope">
                <span>{{ tableData[scope.$index]['realArea5']||'0.00' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="核定">
            <template #default="scope">
                <span>{{ tableData[scope.$index]['approveArea5']||'0.00'  }}</span>
            </template>
          </el-table-column>
          <el-table-column label="超标" prop="bcb">
            <template #default="scope">
                <span>{{ tableData[scope.$index]['exceedArea5']||'0.00'  }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="服务用房面积">
          <el-table-column label="使用">
            <template #default="scope">
                <span>{{ tableData[scope.$index]['realArea1']||'0.00' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="核定">
            <template #default="scope">
                <span>{{ tableData[scope.$index]['approveArea1']||'0.00' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="超标">
            <template #default="scope">
                <span>{{ tableData[scope.$index]['exceedArea1']||'0.00'  }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="设备用房面积">
          <el-table-column label="使用">
            <template #default="scope">
                <span>{{ tableData[scope.$index]['realArea2']||'0.00' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="核定">
            <template #default="scope">
                <span>{{ tableData[scope.$index]['approveArea2']||'0.00' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="超标">
            <template #default="scope">
                <span>{{ tableData[scope.$index]['exceedArea2']||'0.00'  }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="基本办公用房面积">
          <el-table-column label="使用">
            <template #default="scope">
                <span>{{ tableData[scope.$index]['realArea0']||'0.00' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="核定">
            <template #default="scope">
                <span>{{ tableData[scope.$index]['approveArea0']||'0.00' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="超标" prop="province">
            <template #default="scope">
                <span>{{ tableData[scope.$index]['exceedArea0']||'0.00'  }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="附属用房" width="100">
          <template #default="scope">
                <span>{{ tableData[scope.$index]['realArea3']||'0.00' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="realArea4" label="业务用房" width="100">
          <template #default="scope">
                <span>{{ tableData[scope.$index]['realArea4']||'0.00' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="realArea6" label="闲置用房" width="100">
          <template #default="scope">
                <span>{{ tableData[scope.$index]['realArea6']||'0.00' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="realArea7" label="出租用房" width="100">
          <template #default="scope">
                <span>{{ tableData[scope.$index]['realArea7']||'0.00' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="realArea8" label="出借用房" width="100">
          <template #default="scope">
                <span>{{ tableData[scope.$index]['realArea8']||'0.00' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="realArea8" label="下属单位">
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>
<script setup>
import {
  unitLedger
} from '@/api/unit'
import {
  getRegionList
} from '@/api/unit'
import ExportExcel from '@/components/exportExcel/exportExcel.vue'
import { reactive, ref, onMounted } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'

// 通过该函数，可以获取组件当前所在的表单项formItem
const { formItem } = useFormItem()

defineOptions({
  name: 'Yygl'
})
const appStore = useAppStore()

const searchInfo = ref({
  name: '',
  type: ''
})

const userStore = useUserStore()
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)

const yyglForm = ref(null)

const checkedColumns = ref(['序号', '办公区名称', '办公区地址', '占地面积', '权属登记情况', '建设年代', '楼宇数'])

if (localStorage.getItem('columnData') && JSON.parse(localStorage.getItem('columnData')).bgqxx) {
  checkedColumns.value = JSON.parse(localStorage.getItem('columnData')).bgqxx
}
const columns = ref(['序号', '办公区名称', '办公区地址', '占地面积', '权属登记情况', '建设年代', '楼宇数'])
const handleColumnsChange = (val) => {
  let obj = {

  }
  if (localStorage.getItem('columnData')) {
    obj = JSON.parse(localStorage.getItem('columnData'))
  }
  obj.bgqxx = val
  localStorage.setItem('columnData', JSON.stringify(obj))
}

const tableData = ref(
  [
  //   {
  //   date: '利川市自然资源和规划局',
  //   name: '130',
  //   province: '30',
  //   address: '上海市普陀区金沙江路',
  //   bsh:1,
  //   bhd:2,
  //   bcb:3,
  //   fsh:4,
  //   fhd:5,
  //   fcb:6
  // }, {
  //   date: '利川市人力资源和社会保障局',
  //   name: '王胡',
  //   province: '上海',
  //   address: '上海市普陀区金沙江路',
  //   bsh:1,
  //   bhd:2,
  //   bcb:3,
  //   fsh:4,
  //   fhd:5,
  //   fcb:6
  // }
]
)

function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  if (rowIndex % 2 === 0) {
    if (columnIndex === 0) {
      return [2, 1]; // 跨越2行，占用1列
    } else if (columnIndex === 1) {
      return [0, 0]; // 不显示，即跨越0行0列，隐藏该单元格
    }
  }
}
// 查询
const getTableData = async () => {
  const res = await unitLedger({
    pageNumber: page.value,
    pageSize: pageSize.value,
    ...searchInfo.value
  })
  if (res.code == 200) {
    tableData.value = res.result.data
    tableData.value.forEach(item=>{
          item.roomExceed.forEach((m,n)=>{
            item['approveArea'+m.roomTypeInt] = m.approveArea
            item['realArea'+m.roomTypeInt] = m.realArea
            item['exceedArea'+m.roomTypeInt] = m.exceedArea
          })
    })
    total.value = res.result.total
  }
}
getTableData()
const areaList = ref([])
onMounted(() => {
  getRegionList().then(res => {
    areaList.value = res.result
  })
})
const props1 = {
  checkStrictly: true,
  label: 'name',
  value: 'name'
}
</script>

<style lang="scss">
.flex {
  .area {
    flex: 2;
    background-color: #fff;
    margin: 0.5rem 20px 0.5rem 0;
  }

  .unit {
    flex: 4;
  }
}

.ant-alert-info {
  display: flex;
  justify-content: end;
  align-items: center;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  color: #1890ff;
  padding: 5px;

  .anticon {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}

.pop-content {
  .pop-title {
    font-weight: bold;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(5, 5, 5, 0.06);
  }

  .el-checkbox-group {
    font-size: 0;
    line-height: 0;
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
